<table class="table preview-table" ng-hide="showLoading">
  <thead>
    <tr>
      <th class="col-md-6 from-stage">
        <select class="pull-left form-control input-sm" name="previewFromStage"
                ng-model="fromStage.selected"
                ng-options="stageInst.uiInfo.label for stageInst in pipelineConfig.stages | filter : filterSourceAndProcessors"
                ng-change="onFromStageChange()">
        </select>
      </th>

      <th class="col-md-6 to-stage">
        <select class="pull-left form-control input-sm" name="previewToStage"
                ng-model="toStage.selected"
                ng-options="stageInst.uiInfo.label for stageInst in toStageList"
                ng-change="onToStageChange()">
        </select>
      </th>

    </tr>
  </thead>

  <tbody>
  <tr ng-repeat="inputRecord in multiStagePreviewData.output | limitTo: recordPagination.outputRecords"
      ng-init="outputRecords = getInputRecords(multiStagePreviewData.input, inputRecord)">
    <td>
      <record-tree
        record="inputRecord"
        record-value="inputRecord.value"
        diff-type="'input'"
        diff-record="outputRecords"
        diff-record-value="outputRecords[0].value"
        field-name="('global.form.record' | translate)+($index+1) + getRecordAdditionalInfo(fromStage.selected, inputRecord, 'output')"
        is-root="true"
        editable="previewMode"
        show-header="snapshotMode || pipelineConfig.uiInfo.previewConfig.showHeader"
        show-field-type="snapshotMode || pipelineConfig.uiInfo.previewConfig.showFieldType">
      </record-tree>

      <div class="show-more" ng-if="$last && recordPagination.outputRecords < multiStagePreviewData.output.length">
        <a class="btn btn-link"
           ng-click="recordPagination.outputRecords = recordPagination.outputRecords + recordMaxLimit;">Show More...</a>

        <span class="separator">|</span>

        <a class="btn btn-link"
           ng-click="recordPagination.outputRecords = multiStagePreviewData.output.length;">Show All ({{multiStagePreviewData.output.length}}) ...</a>
      </div>
    </td>

    <td>
      <div ng-repeat="record in outputRecords | limitTo: recordPagination.inputRecords">
        <record-tree
          record="record"
          record-value="record.value"
          diff-type="'output'"
          diff-record="inputRecord"
          diff-record-value="inputRecord.value"
          field-name="('global.form.record' | translate)+($parent.$index+1)"
          is-root="true"
          editable="false"
          show-header="snapshotMode || pipelineConfig.uiInfo.previewConfig.showHeader"
          show-field-type="snapshotMode || pipelineConfig.uiInfo.previewConfig.showFieldType">
        </record-tree>

        <div class="show-more" ng-if="$last && recordPagination.inputRecords < outputRecords.length">
          <a class="btn btn-link"
             ng-click="recordPagination.inputRecords = recordPagination.inputRecords + recordMaxLimit;">Show More...</a>

          <span class="separator">|</span>

          <a class="btn btn-link"
             ng-click="recordPagination.inputRecords = outputRecords.length;">Show All ({{outputRecords.length}}) ...</a>
        </div>
      </div>
    </td>
  </tr>

  <tr ng-repeat="inputRecord in multiStagePreviewData.eventRecords | limitTo: recordPagination.eventRecords"
      ng-init="outputRecords = getInputRecords(multiStagePreviewData.input, inputRecord)">
    <td>
      <record-tree
        record="inputRecord"
        record-value="inputRecord.value"
        diff-type="'input'"
        diff-record="outputRecords"
        diff-record-value="outputRecords[0].value"
        field-name="('global.form.eventRecord' | translate)+($index+1) + getRecordAdditionalInfo(fromStage.selected, inputRecord, 'output')"
        is-root="true"
        editable="previewMode"
        show-header="snapshotMode || pipelineConfig.uiInfo.previewConfig.showHeader"
        show-field-type="snapshotMode || pipelineConfig.uiInfo.previewConfig.showFieldType">
      </record-tree>

      <div class="show-more" ng-if="$last && recordPagination.eventRecords < multiStagePreviewData.eventRecords.length">
        <a class="btn btn-link"
           ng-click="recordPagination.eventRecords = recordPagination.eventRecords + recordMaxLimit;">Show More...</a>

        <span class="separator">|</span>

        <a class="btn btn-link"
           ng-click="recordPagination.eventRecords = multiStagePreviewData.eventRecords.length;">Show All ({{multiStagePreviewData.eventRecords.length}}) ...</a>
      </div>
    </td>

    <td>
      <div ng-repeat="record in outputRecords | limitTo: recordPagination.inputRecords">
        <record-tree
          record="record"
          record-value="record.value"
          diff-type="'output'"
          diff-record="inputRecord"
          diff-record-value="inputRecord.value"
          field-name="('global.form.record' | translate)+($parent.$index+1)"
          is-root="true"
          editable="false"
          show-header="snapshotMode || pipelineConfig.uiInfo.previewConfig.showHeader"
          show-field-type="snapshotMode || pipelineConfig.uiInfo.previewConfig.showFieldType">
        </record-tree>

        <div class="show-more" ng-if="$last && recordPagination.inputRecords < outputRecords.length">
          <a class="btn btn-link"
             ng-click="recordPagination.inputRecords = recordPagination.inputRecords + recordMaxLimit;">Show More...</a>

          <span class="separator">|</span>

          <a class="btn btn-link"
             ng-click="recordPagination.inputRecords = outputRecords.length;">Show All ({{outputRecords.length}}) ...</a>
        </div>
      </div>
    </td>
  </tr>

  <tr ng-repeat="record in multiStagePreviewData.errorRecords | limitTo: recordPagination.errorRecords">

    <td>
      <record-tree
        record="record"
        record-value="record.value"
        field-name="('global.form.record' | translate)+ '-' + ('global.form.errorRecord' | translate) + ' ' + record.header.errorMessage"
        is-root="true"
        is-error="true"
        editable="false"
        show-header="snapshotMode || pipelineConfig.uiInfo.previewConfig.showHeader"
        show-field-type="snapshotMode || pipelineConfig.uiInfo.previewConfig.showFieldType">
      </record-tree>

      <div class="show-more" ng-if="$last && recordPagination.errorRecords < multiStagePreviewData.errorRecords.length">
        <a class="btn btn-link"
           ng-click="recordPagination.errorRecords = recordPagination.errorRecords + recordMaxLimit;">Show More...</a>

        <span class="separator">|</span>

        <a class="btn btn-link"
           ng-click="recordPagination.errorRecords = multiStagePreviewData.errorRecords.length;">Show All ({{multiStagePreviewData.errorRecordss.length}}) ...</a>
      </div>
    </td>

    <td>

    </td>

  </tr>

  <tr ng-if="multiStagePreviewData.input.length === 0 &&
                      multiStagePreviewData.output.length === 0 &&
                      multiStagePreviewData.errorRecords.length === 0">
    <td colspan="2" class="no-records" translate="home.previewPane.noRecords">No Records to view.</td>
  </tr>

  </tbody>

</table>
